<template>
	<view>
		<form @submit="onsubmit">
			<view class="row">
				<input type="text" name="username" />
			</view>
			<view>
				<textarea name="content"></textarea>
			</view>
			<view>
				<radio-group name="gender">
					<radio value="男">男</radio>
					<radio value="女">女</radio>
					<radio value="保密" checked>保密</radio>
				</radio-group>
			</view>
			
			<view>
				<picker :range="option" name="scholl" :value="selectIndex" @change="pickerChange">
					<view>请选择学历：{{option[selectIndex]}}</view>
				</picker>
			</view>
			
			<view>
				<button form-type="submit" type="primary">提交表单</button>
				<button form-type="reset">重置表单</button>
			</view>
		</form>
		{{obj}}
	
	<input type="text" v-model="title"/>
	<view>原标题:{{title}}</view>
	<view>修改后：{{changeTitle}}</view>
	
	<view>{{calc}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				obj:null,
				option:["小学","大学","中庸","四书"],
				selectIndex:2,
				title:""
			}
		},
		methods:{
			onsubmit(e){
				console.log(e)
				this.obj=e.detail.value
			},
			pickerChange(e){
				console.log("pick="+e);
				this.selectIndex=e.detail.value;
			}
		},
		//这就是计算属性
		//在computed里面写就相当于在data-return里面写，
		//只不过computed里面写的是动态的。data-return是固定的。
		computed:{
			calc(){
				return "学习uniapp"
			},
			changeTitle(){
				return this.title.toLocaleLowerCase()
			}
		}
	}
</script>

<style lang="scss">
	input,
	textarea {
		border: 1rpx solid red;
	}

	.row {
		margin: 20rpx 0rpx;
	}
</style>